<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <u-navbar
      title="empty_project_fastapi_uniapp应用"
      :autoBack="false"
      bgColor="#3c9cff"
      titleStyle="color: #ffffff; font-size: 16px"
    ></u-navbar>
    
    <!-- 内容区域 -->
    <view class="content">
      <u-image
        width="150px"
        height="150px"
        src="/static/images/logo.png"
        mode="aspectFit"
      ></u-image>
      
      <view class="title">欢迎使用empty_project_fastapi_uniapp应用</view>
      <view class="subtitle">基于UniApp + uView Plus + FastAPI开发</view>
      
      <u-gap height="30"></u-gap>
      
      <!-- 按钮 -->
      <u-button
        type="primary"
        text="获取HelloWorld消息"
        @click="fetchHello"
        :loading="loading"
      ></u-button>
      
      <!-- 消息展示区域 -->
      <view class="message-box" v-if="message">
        <u-card
          :title="'服务器消息'"
          :sub-title="formattedTime"
          :thumb="'/static/images/logo.png'"
          thumb-width="40px"
          thumb-height="40px"
        >
          <text slot="body" class="message-text">{{ message }}</text>
        </u-card>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 首页
 * 展示应用主界面，提供调用Hello API的功能
 */
export default {
  data() {
    return {
      // 消息内容
      message: '',
      // 时间戳
      timestamp: '',
      // 加载状态
      loading: false
    };
  },
  computed: {
    // 格式化的时间
    formattedTime() {
      if (!this.timestamp) return '';
      // 将时间格式化为本地时间
      return new Date(this.timestamp).toLocaleString();
    }
  },
  methods: {
    /**
     * 调用后端Hello API
     * 获取服务器返回的问候消息和时间戳
     */
    async fetchHello() {
      this.loading = true;
      try {
        // 发起请求
        const res = await uni.request({
          url: '/api/hello',
          method: 'GET'
        });
        
        if (res.statusCode === 200) {
          console.log('请求成功:', res.data);
          this.message = res.data.message;
          this.timestamp = res.data.timestamp;
          
          // 显示成功提示
          uni.showToast({
            title: '请求成功',
            icon: 'success'
          });
        } else {
          throw new Error('请求失败');
        }
      } catch (error) {
        console.error('请求失败:', error);
        
        // 显示错误提示
        uni.showToast({
          title: '请求失败',
          icon: 'error'
        });
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 20px;
  color: #333333;
  margin-top: 20px;
  font-weight: bold;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 10px;
}

.message-box {
  margin-top: 30px;
  width: 90%;
}

.message-text {
  font-size: 16px;
  color: #333333;
  line-height: 1.5;
}
</style> 